<script setup lang="ts">
import type { PropType } from 'vue'
import { SearchOutlined } from '@ant-design/icons-vue'

const props = defineProps({
  addPermiCodes: {
    type: Array<string>,
    default: undefined,
  },
  exportPermiCodes: {
    type: Array<string>,
    default: undefined,
  },
  placeholder: {
    type: String,
    default: '',
  },
  showFiltering: {
    type: Boolean,
    default: true,
  },
  showAdd: {
    type: Boolean,
    default: true,
  },
  showExport: {
    type: Boolean,
    default: false,
  },
  columns: {
    type: Array,
    default: () => {
      return []
    },
  },
  dataSource: {
    type: Array,
    default: () => {
      return []
    },
  },
  pagination: {
    type: Object,
    default: () => {
      return {}
    },
  },
  rowClassName: {
    type: Object,
    default: () => {},
  },
  loading: {
    type: Boolean,
    default: false,
  },
  queryForm: {
    type: Object as PropType<PageQuery>,
    default: () => {
      return {}
    },
  },
})

const emit = defineEmits(['onQuery', 'showModal', 'showDetail', 'sortChange', 'exportExcel', 'clear'])
const queryFormRef = ref()
const inputContent = ref('')
const refPagination = ref(props.pagination)

const showTableFilterPopover = ref(false)

function customRow(record) {
  return {
    onClick: () => {
      showTableFilterPopover.value = false
      emit('showDetail', record)
    },
  }
}
const tableChange: TableProps<TableDataType>['onChange'] = (pagination, filters, sorter) => {
  console.log('params', pagination, filters, sorter)
  if (sorter.order) {
    emit('sortChange', {
      orderByColumn: sorter.field,
      isAsc: sorter.order.includes('asc') ? 'asc' : 'desc',
    })
  }
  else {
    emit('sortChange', {
      orderByColumn: undefined,
      isAsc: undefined,
    })
  }
  refPagination.value.current = 1
}

function fetchList(isClear: boolean = false) {
  showTableFilterPopover.value = false
  emit('onQuery', inputContent.value, isClear)
}

function clearQuery() {
  emit('clear')
}

const showModal = () => emit('showModal', true)

function handleOpenChange(visible: boolean) {
  if (!visible)
    showTableFilterPopover.value = false
}

const exportExcel = () => emit('exportExcel', true)

const popoverContainer = () => document.querySelector('.bh-table-container')

defineExpose({ clearQuery })
</script>

<template>
  <div>
    <a-card class="mb-20px">
      <div>
        <a-form ref="queryFormRef" :model="queryForm" label-align="left" :colon="false">
          <div class="flex items-center gap-10px">
            <a-input
              v-model:value="inputContent" :placeholder="placeholder"
              class="grow"
              @press-enter="fetchList(false)"
            >
              <template #prefix>
                <SearchOutlined />
              </template>
            </a-input>
            <div class="bh-table-title-suffix">
              <div class="bh-table-title-suffix-content">
                <slot name="filter" />
                <a-popover
                  v-if="showFiltering"
                  :get-popup-container="popoverContainer" placement="bottomRight"
                  overlay-class-name="bh-table-filter-popover"
                  trigger="click"
                  :open="showTableFilterPopover" @open-change="handleOpenChange" @click="showTableFilterPopover = true"
                >
                  <template #content>
                    <div class="bh-popover-container">
                      <div class="bh-popover-title">
                        <h4>高级筛选</h4>
                        <a-button class="bh-clear-btn" type="link" size="small" @click="clearQuery">
                          <template #icon>
                            <bh-icon type="icon-qingchu" />
                          </template>
                          清除
                        </a-button>
                      </div>
                      <div class="bh-popover-content">
                        <slot name="filterPopover" />
                      </div>
                      <div class="bh-popover-footer">
                        <a-button @click="showTableFilterPopover = false">
                          取消
                        </a-button>
                        <a-button type="primary" @click="fetchList(false)">
                          查询
                        </a-button>
                      </div>
                    </div>
                  </template>
                  <a-button class="bh-filter-btn">
                    <template #icon>
                      <bh-icon type="icon-shaixuan" />
                    </template>
                  </a-button>
                </a-popover>

                <a-popover v-if="showExport" placement="bottomRight" :get-popup-container="popoverContainer">
                  <a-button v-hasPermi="exportPermiCodes || ['*:*:*']" class="bh-filter-btn" @click="exportExcel">
                    <template #icon>
                      <bh-icon name="icon-daochudaoEXCEL" />
                    </template>
                  </a-button>
                  <template #content>
                    <p style="margin-bottom: 0">
                      导出EXCEL
                    </p>
                  </template>
                </a-popover>

                <a-button v-if="showAdd" v-hasPermi="addPermiCodes || ['*:*:*']" type="primary" @click="showModal">
                  新增
                </a-button>
              </div>
            </div>
          </div>
        </a-form>
      </div>
      <div>
        <slot name="other" />
      </div>
    </a-card>
    <a-card>
      <a-table
        class="bh-table-container" :class="dataSource.length === 0 ? 'table-empty' : ''" :loading="loading" :columns="columns"
        :data-source="dataSource" :pagination="false"
        :row-class-name="rowClassName"
        :custom-row="customRow"
        @change="tableChange"
      >
        <template #bodyCell="{ text, record, index, column }">
          <slot name="tableBody" :text="text" :record="record" :index="index" :column="column" />
        </template>
        <template #headerCell="{ column, title }">
          <slot name="headerCell" :title="title" :column="column" />
        </template>
        <template #emptyText>
          <div class="mt-100px mb-100px">
            <a-empty img-width="60px" img-heidht="60px" />
          </div>
        </template>
      </a-table>
      <div class="text-right">
        <div>
          <a-pagination
            v-show="refPagination.total > 0"
            v-model:current="refPagination.current"
            v-model:pageSize="refPagination.pageSize" :show-total="refPagination.showTotal" :total="refPagination.total"
            :show-size-changer="false"
            :show-quick-jumper="false"
            show-less-items @change="refPagination.onChange"
          />
        </div>
      </div>
    </a-card>
  </div>
</template>

<style scoped lang="less">
@import "./index";
:deep(.ant-table-empty){
    .ant-table-cell{
      background: #f0f2f5;
    }
    .ant-table-placeholder:hover > td{
      background: #f0f2f5 !important;
    }
}

:deep(.ant-table) {

}

.bh-table-title-suffix {
  margin-right: 35px;

  .bh-table-title-suffix-content {
    display: flex;
    gap: 20px;
  }

}

.bh-table-container :deep(.bh-table-filter-popover) {
  padding-top: 0;
  width: 320px;

  .ant-popover-arrow {
    display: none;
  }

  .ant-popover-inner {
    border-radius: var(--bh-border-radius-large);
    padding: 20px 30px 25px 30px;
    height: 100%;
  }

  .bh-popover-container {
    display: flex;
    flex-direction: column;
    gap: 20px;

    .bh-popover-title {
      display: flex;
      justify-content: space-between;
      align-items: center;

      h4 {
        margin: 0;
        font-size: 12px;
        color: var(--bh-color-3);
      }

      .bh-clear-btn {
        color: var(--bh-color-primary);
      }
    }

    .bh-popover-content {
      display: flex;
      flex-direction: column;
      gap: 20px;

      .ant-form-item {
        margin-bottom: 0;
        flex-grow: 1;

        .ant-form-row {
          display: flex;
          flex-direction: column;
        }

        .ant-form-item-label label {
          color: var(--bh-color-9);
          height: 100%;
        }

        .ant-form-item-control-input, .ant-form-item-control-input-content {

          & > * {
            width: 100%;
          }

          .ant-picker {
            min-height: 30px;
            background: var(--bh-color-white);
            border: 1px solid var(--bh-color-e8);

            input {

              &::placeholder {
                color: var(--bh-color-c0);
              }
            }
          }

          .ant-select .ant-select-selector {

          }
        }
      }
    }

    .bh-popover-footer {
      display: flex;
      gap: 30px;
      justify-content: center;
      align-items: center;
    }
  }
}
</style>
